<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用组件 -->
      <zhangsan></zhangsan>
      <hr />
      <lisi></lisi>
    </div>
    <script>
      // 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
      // 1. 定义一个可复用minxin功能  HOC 高阶组件目的：就是实现状态的复用
      // 2. Vue中的混入有2种方式
      // 2.1 Vue.mixin({}) 一旦使用全局混入，它将影响每一个之后创建的 Vue 实例
      // 2.2 局部混入 定义 比如我们这个例子

      // 注意：1. 谨慎使用全局混入 2. 当混入功能和自己功能冲突 优先使用自己的
      var myMinxin = {
        // 写任何符合vue语法的功能
        data() {
          return {
            jn: '打电话',
          };
        },
        // methods 生命周期 计算属性 ...
      };

      // 定义基础组件
      Vue.component('zhangsan', {
        /* data () {
        return {
          jn: '打电话'
        }
      }, */
        mixins: [myMinxin], // 2. 这里可以混入多个技能
        template: `<div>
        <h2>我是张三我为自己代言--技能：{{jn}}</h2>
      </div>`,
      });
      Vue.component('lisi', {
        data () {
        return {
          jn: '发短信'
        }
      },
        mixins: [myMinxin], // 2. 这里可以混入多个技能
        template: `<div>
        <h2>我是李四我为自己代言--技能：{{jn}}</h2>
      </div>`,
      });

      var vm = new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>
